<template>
  <view>
    <!-- 顶部搜素框模块 -->
    <ugo-search></ugo-search>
    <!-- 轮播图模块 -->
    <swiper class="m-swiper" indicator-dots autoplay circular>
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <image :src="item.image_src"></image>
      </swiper-item>
    </swiper>
    <!-- 入口导航模块 -->
    <view class="m-nav">
      <template v-for="item in navList">
        <navigator
          :key="item.name"
          v-if="item.name === '分类'"
          url="/pages/category/index"
          open-type="switchTab"
          hover-class="none"
        >
          <image :src="item.image_src" mode="scaleToFill" />
        </navigator>
        <image
          v-else
          :key="item.name + 1"
          :src="item.image_src"
          mode="scaleToFill"
        />
      </template>
    </view>
    <!-- 楼层模块 -->
    <view class="m-floor">
      <view
        class="floor"
        v-for="item in floorList"
        :key="item.floor_title.name"
      >
        <image class="floor-title" :src="item.floor_title.image_src"></image>
        <view class="product-list goodswrap">
          <image
            v-for="goods in item.product_list"
            :key="goods.name"
            mode="heightFix"
            :src="goods.image_src"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // data是一个函数
  data() {
    return {
      keyword: "",
      // 轮播图列表
      swiperList: [],
      // 入口导航列表
      navList: [],
      // 楼层列表
      floorList: [],
    };
  },
  async onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList();
  },
  async onPullDownRefresh() {
    // console.log("拉了");
    // this.swiperList = [];
    // 重新发请求
    // await this.getSwiperList();
    // await this.getNavList();
    // await this.getFloorList();

    await Promise.all([
      this.getSwiperList(),
      this.getNavList(),
      this.getFloorList(),
    ]);

    // 收起下拉刷新
    uni.stopPullDownRefresh();
  },
  methods: {
    async getSwiperList() {
      const res = await uni.$u.http.get("/home/swiperdata");
      // console.log(res);
      this.swiperList = res.data.message;
      // const [error, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      // });
      // // console.log(res);
      // if (!error) {
      //   this.swiperList = res.data.message;
      // }
    },
    async getNavList() {
      const res = await uni.$u.http.get("/home/catitems");
      this.navList = res.data.message;
    },
    async getFloorList() {
      const res = await uni.$u.http.get("/home/floordata");
      this.floorList = res.data.message;
      // const [error, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      // });
      // if (!error) {
      //   this.floorList = res.data.message;
      // }
    },
  },
};
</script>

<style lang="scss">
.m-swiper {
  width: 750rpx;
  height: 340rpx;
  image {
    width: 750rpx;
    height: 340rpx;
  }
}
.m-nav {
  display: flex;
  margin: 12rpx 30rpx;
  justify-content: space-between;
  image {
    width: 128rpx;
    height: 140rpx;
  }
}
.m-floor {
  .floor-title {
    margin-top: 43rpx;
    width: 750rpx;
    height: 60rpx;
  }
  .product-list {
    image {
      float: left;
      height: 188rpx;
      margin-left: 12rpx;
      margin-bottom: 10rpx;
      &:first-child {
        height: 386rpx;
      }
    }
  }
}
</style>
